<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>

<div class="login-container layui-hide">
    <div class="left-container" id="leftContainer">
        <img src="/images/login/mch-login-img.svg" alt="" />
    </div>
    <div class="logo-pallet">
        <div class="logo-img-box" id="siteLogo"></div>
    </div>
    <div class="right-container">
        <div class="top-nav">
            <a class="top-nav-link" href="" id="mchSiteUrl">
                <div class="web-link">官网首页</div>
                <img src="/images/login/arrow1CB7A2.svg" alt="" class="link-arrow" />
            </a>
        </div>
        <div class="input-pallet-box">
            <div class="input-title-box">
                <div class="title-icon-box">
                    <img src="/images/login/mach-login-icon.svg" alt="" />
                </div>
                <div class="title-text-box">
                    <div class="title-text-cn">商户系统登录</div>
                    <div class="title-text-en">Login to the merchant system</div>
                </div>
            </div>

            <form class="layui-form" style="max-width: 100%;">
                <input name="vercodeRandomStr" id="vercodeRandomStr" type='hidden'>
                <div class="input-box">
                    <div class="input-tips">用户名</div>
                    <div class="input-con-box">
                        <img src="/images/login/user-icon.svg" alt="" class="input-icon" />
                        <input type="text" name="username" lay-verify="required" class="input-pallet" />
                    </div>
                </div>

                <div class="input-box">
                    <div class="input-tips">密码</div>
                    <div class="input-con-box">
                        <img
                                src="/images/login/password-icon.svg"
                                alt=""
                                class="input-icon"
                        />
                        <input type="password" name="password" lay-verify="required" class="input-pallet" />
                    </div>
                </div>

                <div class="input-box">
                    <div class="input-tips">图形验证码</div>
                    <div class="input-con-box captcha-box">
                        <img
                                src="/images/login/captcha-icon.svg"
                                alt=""
                                class="input-icon"
                        />
                        <input type="text" name="vercode" lay-verify="required" class="input-pallet captcha-input" />
                        <div class="captcha-img">
                            <img src="" id="LAY-user-get-vercode" alt="" />
                        </div>
                    </div>
                </div>

                <div class="input-box">
                    <div class="input-tips">谷歌验证码（若没有可以不填）</div>
                    <div class="input-con-box">
                        <img src="/images/login/google-icon.svg" alt="" class="input-icon" />
                        <input type="text" name="googleCode" class="input-pallet" />
                    </div>
                </div>

                <div class="input-box flex-box button-box">
                    <div class="login-button" id="loginBtn" lay-submit lay-filter="LAY-user-login-submit" onclick="return false;">
                        <div class="login-but-text">登录</div>
                        <div class="login-but-img">
                            <img src="/images/login/arrowFFF.svg" alt="" />
                        </div>
                    </div>
                    <a class="sign-button" href="">没有账号？去注册</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'user'], function(){
        var $ = layui.$
            ,setter = layui.setter
            ,admin = layui.admin
            ,form = layui.form
            ,router = layui.router()
            ,search = router.search
            ,layer = layui.layer;

        var loadIndex = layer.load(1);

        //变更网站信息
        var siteInfo = layui.data(layui.setter.tableName).siteInfo;
        $("#mchSiteUrl").attr("href", siteInfo.mchSiteUrl);
        $("#siteLogo").append('<img src="'+siteInfo.siteLogo+'" style="height: 30px;" alt="'+siteInfo.siteTitle+'">');

        $.loginOk = function(res) {
            //请求成功后，写入 access_token
            layui.data(setter.tableName, {
                key: setter.request.tokenName
                ,value: res.data.access_token
            });

            //登入成功的提示与跳转
            layer.msg('登入成功', {
                offset: '15px'
                ,icon: 1
                ,time: 1000
            }, function(){
                location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
            });
        };

        $('.input-pallet').bind('keyup', function(event) {
            if (event.keyCode == "13") { //keyCode=13是回车键
                $("#loginBtn").trigger("click");
            }
        });

        //提交
        form.on('submit(LAY-user-login-submit)', function(obj){

            //请求登入接口
            admin.req({
                url: layui.setter.baseUrl + '/auth' //实际使用请改成服务端真实接口
                ,data: obj.field
                ,done: function(res){
                    $.loginOk(res);
                }
            });
        });

        $.randomString = function (len) {
            len = len || 32;
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var maxPos = $chars.length;
            var pwd = '';
            for (i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        };

        $('body').off('click', "#LAY-user-get-vercode").on('click', "#LAY-user-get-vercode", function(){
            var vercodeRandomStr = $.randomString(6) + new Date().getTime();
            $("#vercodeRandomStr").val(vercodeRandomStr);
            $("#LAY-user-get-vercode").attr('src', layui.setter.baseUrl + '/auth/vercode?vercodeRandomStr=' + vercodeRandomStr);
        });

        $("#LAY-user-get-vercode").click();

        //监听加载状态改变
        $(document).ready(function(){
            layer.close(loadIndex);
            $(".login-container").removeClass("layui-hide");
        });

    });
</script>

